<template>
  <table-search
    :reqFn="reqFn"
    :keys="keys"
    title="选择组织"
    ref="tableSearch"
    :params="form"
    :show-page="showPage"
    :disabled="disabled"
    @hideDialog="resetForm"
    @change="handleChange">
    <template slot="table">
      <vxe-table-column title="编号" field="id"/>
      <vxe-table-column title="名称" field="name"/>
    </template>
    <template slot="form">
      <el-form layout="inline">
        <el-form-item label="名称" class="form-item">
          <el-input v-model="form.likeName" @keyup.enter="search"/>
        </el-form-item>
        <el-form-item label="类型" class="form-item">
          <el-select v-model="form.type" :disabled="isTypeDisabled" allowClear>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="form-item form-button-group">
          <el-button
            class="form-btn"
            @click.native="search"
            type="primary">搜索
          </el-button>
          <el-button
            class="form-btn"
            @click.native="reset">重置
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <template slot="dialogTable">
      <vxe-table-column title="编号" field="id"></vxe-table-column>
      <vxe-table-column title="名称" field="name"></vxe-table-column>
      <vxe-table-column title="类型" field="type">
        <template v-slot="{ row }">
          {{ transType(row.type) }}
        </template>
      </vxe-table-column>
    </template>
  </table-search>
</template>

<script>
import tableSearch from '@/components/TableSearch'
import {getOrganListByPage} from '@/api/common'
import {
  listToMap
} from '@/utils/array'

const TYPE_ENUM = [
  {
    label: '供应商',
    value: 1
  },
  {
    label: '工厂',
    value: 2
  },
  {
    label: '平台',
    value: 3
  },
  {
    label: '运营商',
    value: 4
  },
  {
    label: 'B2B门店',
    value: 5
  },
  {
    label: 'B2C门店',
    value: 6
  },
  {
    label: '其他',
    value: 0
  }
]
const form = {
  likeName: '',
  type: ''
}
export default {
  components: {
    tableSearch
  },
  data() {
    return {
      keys: {
        searchKey: 'likeName',
        showKey: 'name'
      },
      form: JSON.parse(JSON.stringify(form)),
      options: TYPE_ENUM,
      reqFn: () => {
      },
      getOrganList: getOrganListByPage
    }
  },
  props: {
    customReqFn: {
      type: Function,
      required: false
    },
    params: {
      type: Object,
      default: () => ({})
    },
    defaultVal: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    showPage: {
      type: Boolean,
      default: true
    },
    immediate: {
      type: Boolean,
      default: false
    },
    items: {
      type: Array,
      default: () => []
    },
    isTypeDisabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    typeMap() {
      return listToMap(TYPE_ENUM, 'value')
    },
    formParams() {
      return {
        ...this.form,
        ...this.params
      }
    }
  },
  watch: {
    params() {
      this.copyParams()
      this.$nextTick(() => {
        this.search()
      })
    }
  },
  created() {
    this.copyParams()
    this.ininFn()
    this.initVal()
    if (this.items.length > 0) {
      this.options = [...this.items]
    } else {
      this.options = TYPE_ENUM
    }
  },
  methods: {
    ininFn() {
      if (this.customReqFn) {
        this.reqFn = this.customReqFn
      } else {
        this.reqFn = this.getOrganList
      }
    },
    initVal() {
      if (this.defaultVal) {
        this.$nextTick(() => {
          this.setVal(this.defaultVal)
        })
      }
    },
    copyParams() {
      this.form = {
        ...this.form,
        ...this.params
      }
    },
    resetForm() {
      this.form = JSON.parse(JSON.stringify(form))
      this.copyParams()
    },
    reset() {
      this.resetForm()
      this.$nextTick(() => {
        this.search()
      })
    },
    search() {
      this.$refs.tableSearch.dialogReload()
    },
    handleChange(value) {
      this.$emit('change', value)
    },
    setVal(val, row) {
      this.$refs.tableSearch.setVal(val, row)
      if (this.immediate) {
        this.$emit('change', row)
      }
    },
    clearVal() {
      this.$refs.tableSearch.clearVal()
    },
    transType(key) {
      if (this.typeMap.has(key)) {
        return this.typeMap.get(key).label
      }
      return ''
    },
    has(key) {
      return this.params[key] !== undefined
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form {
  display: flex;
}

.form-item /deep/ {
  width: 280px;
  display: flex;

  .el-form-item__label {
    width: 80px;
  }

  .el-form-item__content {
    width: 200px;
  }
}

.form-button-group {
  margin-left: 80px;
}
</style>
